<template>
	<view v-show="show" :class="['v-window', `v-window--size-${size}`, { 'v-window--fullscreen': fullscreen }]" :style="windowStyle">
		<view class="v-window-header" v-if="title">
			<view class="v-window-title">{{ title }}</view>
			<view class="v-window-actions" v-if="showActions">
				<button class="v-window-action" @click="minimize">
					<text class="icon-minimize">-</text>
				</button>
				<button class="v-window-action" @click="maximize">
					<text class="icon-maximize">□</text>
				</button>
				<button class="v-window-action" @click="close">
					<text class="icon-close">×</text>
				</button>
			</view>
		</view>
		<view class="v-window-content">
			<slot></slot>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed,inject,watch } from 'vue';

const props = defineProps({
	title: {
		type: String,
		default: ''
	},
	fullscreen: {
		type: Boolean,
		default: false
	},
	showActions:{
		type:Boolean,
		default:true
	},
	show:{
		type:Boolean,
		default:true
	}
});

const emit = defineEmits(['update:show','update:showActions','update:fullscreen','close', 'minimize', 'maximize']);
const config = inject<any>('config');
const windowStyle = computed(() => {
	return {
		width: props.fullscreen ? '100%' : undefined,
		height: props.fullscreen ? '100%' : undefined,
		'--window-title-color': '#333',
		'--window-content-bg': '#fff',
		'--window-border-color': '#e0e0e0'
	};
});

const showActions = ref(props.showActions);
const show = ref(props.show);
const fullscreen = ref(props.fullscreen);

watch(()=>props.show,(newValue)=>{
	show.value = newValue;
},{
	immediate:true
})
watch(()=>props.showActions,(newValue)=>{
	showActions.value = newValue;
},{
	immediate:true
})
watch(()=>props.fullscreen,(newValue)=>{
	fullscreen.value = newValue;
},{
	immediate:true
})


const close = () => {
	show.value = false;
	emit('update:show',false)
	emit('close');
};

const minimize = () => {
	fullscreen.value = false;
	emit('update:fullscreen',false);
	emit('minimize');
};

const maximize = () => {
	fullscreen.value = true;
	emit('update:fullscreen',true);
	emit('maximize');
};
</script>

<style lang="scss" scoped>
.v-window {
	width: 80%;
	height: 100%;
	display: flex;
	flex-direction: column;
	border: 1rpx solid var(--window-border-color);
	border-radius: 4rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
	background-color: var(--window-content-bg);
	overflow: hidden;
	margin: auto;

	&--fullscreen {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
	}

	.v-window-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8rpx 16rpx;
		background-color: var(--window-content-bg);
		border-bottom: 1rpx solid var(--window-border-color);

		.v-window-title {
			font-size: v-bind("config.fontSize.mediumTitle");
			font-weight: bold;
			color: var(--window-title-color);
		}

		.v-window-actions {
			display: flex;
		}

		.v-window-action {
			background: none;
			border: none;
			cursor: pointer;
			font-size: v-bind("config.fontSize.smallText");
			margin-left: 8rpx;

			&:hover {
				background-color: #f5f5f5;
			}
		}
	}

	.v-window-content {
		flex: 1;
		padding: 16rpx;
		overflow: auto;
	}
}
</style>
